var objs = {}
var elements = {}


function render(layout) {
    parseElement(layout[0], null)
    flexOrNot(elements)
    return objs
}
/**
 * name:
 * attri:
 * subs
 */
function flexOrNot(elements) {
    let ids = Object.keys(elements)
    ids.forEach((id, index) => {
        let css = elements[id].attri.css
        var csss = css.split(","); //字符分割 
        // flexDirection:row,justifyContent:center,alignItems:stretch
        var v = {}
        csss.forEach(str => {
            var ss = str.split(":")
            v[ss[0]] = ss[1]
        })
        objs[id].flexWithLayout(v)
        // var isFlex = false
        // if (element.attri.css) {
        //     isFlex = true
        // }

        // if (isFlex == true && element.subs && element.subs.length != 0) {
        //     var childs = []
        //     for (let index = 0; index < element.subs.length; index++) {
        //         const ele = element.subs[index];
        //         childs.push(objs[ele.attri.id])
        //     }
        //     if (childs.length > 0) {
        //         objs[id].flxChildWithViews(childs)
        //     }
        // }
    })
}

function parseElement(element, parent) {
    let isContains = isViewElement(element)
    if (isContains == true) {
        elements[element.attri.id] = element
        let attriKeys = Object.keys(element.attri)
        console.log(attriKeys)
        attriKeys.forEach((attriKey, index) => {
            if (attriKey == 'frame') {
                console.log('frame')
            } else if (attriKey == 'bg') {
                console.log('bg')
                objs[element.attri.id].backgroundWithColor(element.attri[attriKey])
            } else if (attriKey == 'color') {
                console.log('color')
                objs[element.attri.id].colorWithColor(element.attri[attriKey])
            } else if (attriKey == 'css') {
                console.log('css')
                // objs[element.attri.id].flexWithCss(element.attri[attriKey])
            } else if (attriKey == 'title') {
                console.log('title')
                objs[element.attri.id].title(element.attri[attriKey])
            } else if (attriKey == 'titleColor') {
                console.log('titleColor')
                objs[element.attri.id].titleColor(element.attri[attriKey])
            } else if (attriKey == 'textColor') {
                console.log('textColor')
                objs[element.attri.id].textColorWithColor(element.attri[attriKey])
            }
        });
        if (parent && parent.name == 'View') {
            objs[parent.attri.id].addWithView(objs[element.attri.id])
        }
    }
    if (element.subs) {
        element.subs.forEach(sub => {
            parseElement(sub, element)
        });
    }
}

function isViewElement(element) {
    var view = null
    if (element.name == 'View') {
        view = new View()
    } else if (element.name == 'Text') {
        view = new Label()
    }

    if (view) {
        objs[element.attri.id] = view
        return true
    }
    return false
}
